import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createPage, base } from 'nc-lightapp-front';
import "./index.less"
const { NCPopover, NCButton } = base;

/**
 * @功能: 单个数据行组件
 * @作者：Mr.sha
 * @日期：2022-05-27
 */
export default class DataTable extends Component {

    /**
     * @功能: 构造函数~~~一些初始化操作
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} props 
     */
    constructor(props){
        super(props);
        this.state = {
            // 票袋名称
            tagName: "票袋名称",
            // 票袋名称的输入框是否只读
            readOnly: true,
            item: this.props.item
        }
    }


    //===================================================================================当前页面js函数~~~开始


    /**
     * @功能: 获取整体div的class
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleAllGetClass() {
        return ['data-table', this.props.activeId === this.state.item ? "data-table-active" : ""].join(" ")
    }


    /**
     * @功能: 票袋名称值改变触发的事件
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleChangeDataTable(e) {
        this.setState({tagName: e.target.value});
    }

    /**
     * @功能: 票袋名称input框移除光标触发的事件
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleBlurDataTable(e) {
        this.setState({readOnly: true});
    }

    /**
     * @功能: 点击编辑按钮触发的事件
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleEditDataTable() {
        this.setState({readOnly: false});
        var input = document.getElementById(this.state.item)
        input.focus();
    }

    /**
     * @功能: 点击删除按钮触发的事件
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleDeleteDataTable() {
        console.log("handleDelete");
    }

    /**
     * @功能: 点击当前对象触发的事件
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @param {*} e 
     */
    handleClickDataTable() {
        let params = { activeId: this.state.item } ;
        this.props.handleChangeActiveDataTableList(params)
    }
    

    //===================================================================================当前页面js函数~~~结束


    //===================================================================================当前页面界面布局~~~开始
    /**
     * @功能: 票单操作界面
     * @作者：Mr.sha
     * @日期：2022-05-27
     * @returns 
     */
    nCPopoverContentDataTable() {
        return (
            <div >
                <div className = 'data-table-edit' 
                    onClick={()=>{
                        this.handleEditDataTable();
                    }}
                >编辑</div>
                <div className = 'data-table-delete'
                    onClick={()=>{
                        this.handleDeleteDataTable();
                    }}
                >删除</div>
            </div>
        );
    }

    render() {
        return (
            <div className = {this.handleAllGetClass()}
            onClick={() => {this.handleClickDataTable()}}>
                <div  className = "data-table-main">
                    <div className = "data-table-title">
                        <div className = "data-table-title-icon flex-col"></div>
                        <input 
                            className = {['data-table-title-info', this.state.readOnly? "data-table-title-info-readonly" : ""].join(" ")}
                            placeholder='请输入票袋名称' 
                            id = {this.state.item}
                            value = {this.state.tagName}
                            onChange = {this.handleChangeDataTable.bind(this)}
                            onBlur = {this.handleBlurDataTable.bind(this)}
                        /> 
                    </div>
                    <div className = "data-table-data">
                        <span className = "data-table-data-money">¥8,888.99</span>
                        <div className = "data-table-data-icon flex-col"></div>
                        <span className = "data-table-data-count">88张</span>
                    </div>
                </div>
                <NCPopover className = 'data-table-option' content={this.nCPopoverContentDataTable()} trigger="click" placement="bottom">
                    <NCButton class="data-table-operation"></NCButton>
                </NCPopover>
            </div>
        )
    }

    //===================================================================================当前页面界面布局~~~结束
}

DataTable = createPage({
    mutiLangCode: '2011'
})(DataTable);

ReactDOM.render(<DataTable />, document.querySelector('#app'))